<template>
	<view class="feedback-record-card">
		<view class="avatar">
			<image class="avatar__image" :src="detail?.avatar" mode="aspectFill"></image>
		</view>
		<view class="feedback-content">
			<view class="feedback-message">
				<text class="up-line-2">{{ detail?.content }}</text>
			</view>
			<view v-if="files.length" class="feedback-attachment">
				<scroll-view class="feedback-attachment-scroll" :scroll-x="true">
					<view class="feedback-attachment-innner">
						<image v-for="item in files" :src="item" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
			<view class="feedback-info">
				<text v-if="detail?.contactInfo" class="feedback-info__cell">{{$t('feedback.record.item.cell-1')}}{{ detail.contactInfo }}</text>
				<text class="feedback-info__cell">{{$t('feedback.record.item.cell-2')}}{{$t(typeName)}}</text>
				<text
					class="feedback-info__cell">{{$t('feedback.record.item.cell-3')}}{{ dateParse(detail?.createTime) }}</text>
			</view>
			<view v-if="replys.length" class="feedback-reply">
				<template v-for="reply in replys">
					<view v-if="store.userId == reply.userId" class="reply-item">
						<text class="reply-item__name">{{$t('feedback.record.item.reply.person-1')}}</text>
						<text class="reply-item__content">{{ reply.replyContent }}</text>
					</view>
					<view v-else class="reply-item">
						<text class="reply-item__name">{{$t('feedback.record.item.reply.person-2')}}</text>
						<text class="reply-item__content">{{ reply.replyContent }}</text>
					</view>
				</template>
				<view class="actions">
					<up-button class="btn" type="primary" shape="square"
						@touchend.prevent="handleReply">{{ $t('feedback.record.item.reply.btn') }}</up-button>
				</view>
			</view>
			<view v-else class="actions">
				<up-button class="btn" type="primary" shape="square"
					@touchend.prevent="handleReply">{{ $t('feedback.record.item.reply.btn') }}</up-button>
			</view>
			<view v-if="showInput" class="reply-box">
				<view class="reply-box__input">
					<up-input v-model="replyContent" :focus="showInput"
						:placeholder="$t('feedback.record.item.reply.placeholder')"></up-input>
				</view>
				<up-button class="reply-box__btn" :disabled="!replyContent.length" type="primary" shape="square"
					@tap="handleSend">{{$t('feedback.record.item.send.btn')}}</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		watch,
		onMounted
	} from 'vue';
	import {
		FeedbackType
	} from '@/composable/constant/feedback';
	import dayjs from 'dayjs';
	import {
		useAppStore
	} from '../../store/app';
	import {
		repliesFeedback
	} from '../../apis/components/system';
	const store = useAppStore();
	import {
		useI18n
	} from "vue-i18n";

	const {
		t
	} = useI18n();

	const {
		detail
	} = defineProps({
		detail: {
			type: Object,
		}
	})
	const showInput = ref(false);
	const dateParse = value => value ? dayjs(value).format(t('common.time.format')) : null;
	const strToArr = (str, limit = ';') => (str || '').split(limit).filter(item => !!item);
	const files = computed(() => strToArr(detail?.picture))
	const typeName = computed(() => FeedbackType.find(item => item.value === detail?.type)?.name);
	const replys = ref([]);

	const handleReply = () => {
		showInput.value = true;
	}
	const replyContent = ref('');
	const sending = ref(false);
	const handleSend = async () => {
		try {
			sending.value = true;
			await repliesFeedback(detail.id, replyContent.value)
			replys.value.push({
				feedbackId: detail.id,
				replyContent: replyContent.value,
				userId: store.userId
			})
			showInput.value = false;
			replyContent.value = '';
		} catch (err) {
			uni.showToast({
				icon: 'none',
				title: typeof err === "string" ? err : err.message
			})
		}
		sending.value = false;
	}

	watch(
		() => detail,
		(now) => {
			replys.value = now?.feedbackReplyBoList || [];
		}, {
			deep: true,
			immediate: true
		}
	)
	
	onMounted(() => {
		// uni.onKeyboardHeightChange(res => {
		// 	if (showInput.value && res.height <= 0) {
		// 		showInput.value = false;
		// 	}
		// })
	})

</script>

<style lang="scss" scoped>
	.feedback-record-card {
		padding: 24rpx 20rpx;
		border-radius: 16rpx;
		background-color: #132034;
		@include flex(row);

		&:not(:last-child) {
			margin-bottom: 24rpx;
		}

		.avatar {
			flex: none;
			width: 72rpx;
			height: 72rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 9999px;
			}
		}

		.feedback-content {
			flex: 1;
			overflow: hidden
		}

		.feedback-message {
			// font-family: Alibaba PuHuiTi 3.0;
			font-size: 28rpx;
			color: #DDDDDD;
		}

		.feedback-attachment {
			width: 100%;
			margin-top: 20rpx;

			&-innner {
				@include flex(row);
				align-items: center;
				flex-wrap: nowrap;

				image {
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;

					&:not(:last-child) {
						margin-right: 20rpx;
					}
				}
			}
		}

		.feedback-info {
			margin-top: 20rpx;
			@include flex(column);

			&__cell {
				margin-bottom: 24rpx;
				// font-family: PingFang;
				font-size: 24rpx;
				line-height: 1;

				color: #808080;
			}
		}

		.feedback-reply {
			padding: 30rpx 16rpx;
			border-radius: 10rpx;
			background-color: #222D49;

			.reply-item {
				// font-family: Alibaba PuHuiTi 3.0;
				font-size: 28rpx;
				line-height: 1.4;
				@include flex(row);
				align-items: baseline;

				&__name {
					flex: none;
					color: #64B7F6;
				}

				&__content {
					color: #808080;
				}
			}
		}
		.actions {
			@include flex(row);
			align-items: center;
			justify-content: flex-end;
		
			.btn {
				width: fit-content;
				min-width: 120rpx;
				height: 56rpx;
				margin: 0;
			}
		}

		.reply-box {
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 24rpx;
			width: 100%;
			box-sizing: border-box;
			z-index: 99;
			background-color: #fff;

			@include flex(row);
			align-items: center;

			&__input {
				flex: 1;
			}

			&__btn {
				width: fit-content;
				max-width: 160rpx;
				height: 56rpx;
			}
		}
	}
</style>